<template>
    <div class="bod">
        <div class="hea">
            <h2 class="logo"> 宠物领养中心</h2>
            <nav class="navigation">
                <a href="">首页</a>
                <a @click="diaVisible = true" style="cursor: pointer;">关于</a>
                <a href="">服务</a>
                <a href="">联系</a>
                <button class="btnLogin-popup">登录</button>

            </nav>
        </div>

        <div class="wrapper">
            <span class="icon-close"><img class="cl" src="../assets/关闭.png" alt="">
            </span>
            <div class="form-box login">
                <h2>登录</h2>
                <form>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/用户.png" alt="">
                        </span>
                        <input type="text" required v-model="u_name">
                        <label>用户名</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/密码.png" alt="">
                        </span>
                        <input type="password" required v-model="u_pwd">
                        <label>密码</label>
                    </div>
                    <div class="remember-forgot">
                        <label><input type="checkbox" @click="rem" checked="checked">记住密码</label>
                        <a href="#"><u>忘记密码?</u></a>
                    </div>
                    <button type="submit" class="btn" @click.prevent="login">登录</button>
                    <div class="login-register">
                        <p>还没有账号?<a href="#" class="register-link"><u>注册</u></a></p>
                    </div>
                </form>
            </div>

            <div class="form-box register">
                <h2>Register</h2>
                <form>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/用户.png" alt="">
                        </span>
                        <input type="text" required v-model="r_u_name">
                        <label>用户名</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/邮箱.png" alt="">
                        </span>
                        <input type="text" required v-model="r_u_email">
                        <label>邮箱</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/密码.png" alt="">
                        </span>
                        <input type="password" required v-model="r_u_pwd">
                        <label>密码</label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><img class="ic" src="../assets/密码.png" alt="">
                        </span>
                        <input type="password" required v-model="r_u_pwd2">
                        <label>确认密码</label>
                    </div>
                    <div class="remember-forgot">
                        <label><input type="checkbox" @click="agr">点击表示同意此协议</label>
                    </div>
                    <button type="submit" class="btn" @click.prevent="register">注册</button>
                    <div class="login-register">
                        <p>我已有账号?<a href="#" class="login-link"><u>登录</u></a></p>
                    </div>
                </form>
            </div>
        </div>
        <el-dialog
        style="opacity: 0.5;"
        title="关于"
        :visible.sync="diaVisible"
        width="50%"
        :before-close="handleClose">
            <span>宠物领养中心是一个纯属个人组织，能力有限，不以盈利为目的，只对从领养中心领养的猫、狗提供服务，不对外营业。因场地有限等因素的影响，我们仍暂缓提供寄养服务，感谢理解！</span>
            <span slot="footer" class="dialog-footer">

            </span>
        </el-dialog>
        
    </div>
</template>

<script>
import axios from 'axios';
export default {

    name: 'Login',
    data() {

        return {
            u_name: '',
            u_pwd: '',
            data: [],
            r_u_name: '',
            r_u_email: '',
            r_u_pwd: '',
            r_u_pwd2: '',
            r_data: [],
            username: '',
            pwd: '',
            isRem: true,
            isAgr: false,
            diaVisible:false
        }
    },
    mounted() {
        const wrapper = document.querySelector('.wrapper');
        const loginLink = document.querySelector('.login-link');
        const registerLink = document.querySelector('.register-link');
        const btnPopup = document.querySelector('.btnLogin-popup')
        const iconClose = document.querySelector('.icon-close')
        registerLink.addEventListener('click', () => {
            wrapper.classList.add('active');
        });
        loginLink.addEventListener('click', () => {
            wrapper.classList.remove('active');
        });
        btnPopup.addEventListener('click', () => {
            wrapper.classList.add('active-popup')
        });

        iconClose.addEventListener('click', () => {
            wrapper.classList.remove('active-popup')
        });
        console.log("success");
        this.load();
    },
    methods: {
        agr() {
            this.isAgr = !this.isAgr;
            console.log(this.isAgr);
        },
        load() {
            this.username = sessionStorage.getItem("username");
            this.pwd = sessionStorage.getItem("password");
            this.u_name = this.username;
            this.u_pwd = this.pwd;
        },
        login() {
            this.data[0] = this.u_name;
            this.data[1] = this.u_pwd;
            
            if(this.data[0]==null || this.data[1]==null){
                this.$message.warning("请输入信息");
            }else{
                var param = new URLSearchParams();
                param.append("username",this.u_name);
                param.append("password",this.u_pwd);
                axios({
                    url:"http://localhost:8080/user/login",
                    method:"get",
                    params:param
                }).then(obj => {
                    
                    if(obj.data.status==2||obj.data.status==3){
                        if(this.isRem){
                            
                            sessionStorage.setItem("username",this.u_name);
                            sessionStorage.setItem("password",this.u_pwd);
                        }else{
                            sessionStorage.removeItem("username");
                            sessionStorage.removeItem("password");
                        }
                        var user=obj.data.data;

                        sessionStorage.setItem("loginUser",JSON.stringify(user));
                        this.$message.success(obj.data.message);
                        this.$router.push("/Manage/first");
                        
                    }else{
                        this.$message.error(obj.data.message);
                    }
                })
            }
        },
        register() {
            this.r_data[0] = this.r_u_name;
            this.r_data[1] = this.r_u_email;
            this.r_data[2] = this.r_u_pwd;
            console.log(this.r_data);
            if(this.r_u_name==null || this.r_u_email==null || this.r_u_pwd==null ||this.r_u_pwd2==null|| this.r_u_name.length==0 || this.r_u_email.length==0 || this.r_u_pwd.length==0 ||this.r_u_pwd2.length==0){
                this.$message.warning("请完善信息");
            }else{
                if(this.r_u_pwd!=this.r_u_pwd2){
                    this.$message.warning("密码不一致");
                }else{
                    if(this.isAgr){
                        var param=new URLSearchParams();
                        param.append("username",this.r_u_name);
                        param.append("email",this.r_u_email);
                        param.append("password",this.r_u_pwd);
                        axios({
                            url:"http://localhost:8080/user/addUser",
                            method:"post",
                            data:param
                        }).then(obj => {
                            if(obj.data){
                                this.$message.success("注册成功");
                                location.reload();
                                
                            }else{
                                this.$message.error("注册失败，请稍后重试");
                            }
                        })
                    }
                    else{
                        this.$message.warning("请勾选协议");
                    }
                    
                }
                
            }

            

        },
        rem() {
            this.isRem = !this.isRem;
            console.log(this.isRem);
        },
        handleClose(done) {
        done();
      }



    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}

.bod {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(../assets/bcg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.hea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}

.logo {
    font-size: 2em;
    color: #fff;
    user-select: none;
}

.navigation a {
    position: relative;
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 40px;
}

.navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 70px;
    height: 3px;
    background: #fff;
    border-radius: 5px;
    transform-origin: right;
    /*效果仅从右边产生*/
    transform: scaleX(0);
    /*产生翻转效果（起始）*/
    transition: transform .5s;
}

.navigation a:hover::after {
    transform-origin: left;
    /*效果从左边结束*/
    transform: scaleX(1);
    /*产生翻转效果（结束）*/
}

.navigation .btnLogin-popup {
    width: 130px;
    height: 50px;
    background: transparent;
    border: 2px solid #fff;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    color: #fff;
    font-weight: 500;
    margin-left: 40px;
    transition: 0.5s;
}

.navigation .btnLogin-popup:hover {
    background: #fff;
    color: #162938;
}

.wrapper {
    position: relative;
    width: 400px;
    height: 440px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*隐藏关闭按钮边角溢出*/
    transform: scale(0);
    transition: transform .5s ease, height .2s ease;
}

.wrapper.active-popup {
    transform: scale(1);
}

.wrapper.active {
    height: 520px;
}

.wrapper .form-box {
    width: 100%;
    padding: 40px;
}

/*login按钮的响应*/
.wrapper .form-box.login {
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper.active .form-box.login {
    transition: none;
    transform: translateX(-400px);
}

.wrapper .form-box.register {
    position: absolute;
    transition: none;
    transform: translateX(400px);
}

.wrapper.active .form-box.register {
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper .icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: #162938;
    font-size: 2em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;
}

.form-box h2 {
    font-size: 2em;
    color: #162938;
    text-align: center;
}

.input-box {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #162938;
    margin: 30px 0;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #162938;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label {
    top: -5px;
}

.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
}

.input-box .icon {
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: #162938;
    line-height: 57px;
}

.remember-forgot {
    font-size: .9em;
    color: #162938;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;
}

.remember-forgot label input {
    accent-color: #162938;
    /*修改 input 默认控件的颜色*/
    margin-right: 3px;
}

.remember-forgot a {
    color: #162938;
    text-decoration: none;
}

.remember-forgot a:hover {
    text-decoration: underline;

}

.ic {
    height: 30px;
    width: 30px;
}

.cl {
    height: 50px;
    width: 50px;
}

.btn {
    width: 100%;
    height: 45px;
    background: #162938;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
}

.login-register {
    font-size: .9em;
    color: #162938;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}

.login-register p a {
    color: #162938;
    text-decoration: none;
    font-weight: 600;
}

.login-register p a:hover {
    text-decoration: underline;
}
</style>